
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<!-- html -->
<html>

<!-- head -->
<head>
    <title>校园充值系统</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /><!-- bootstrap-CSS -->
    <link rel="stylesheet" href="css/bootstrap-select.css"><!-- bootstrap-select-CSS -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <link href="css/font-awesome.css" rel="stylesheet" type="text/css" media="all" /><!-- Fontawesome-CSS -->

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="Online Recharge Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

</head>
<!-- //head -->
<!-- body -->
<header>
    <%@include file="Top.jsp"%>
</header>

<body >
<!--header-->

<!--//-->
<div class=" header-right">
    <div class="banner">
        <div class="slider">
            <div class="callbacks_container">
                <ul class="rslides" id="slider">
                    <li>
                        <div class="banner1">
                            <div class="caption">
                                <h3><span>快捷支付，</span> 校园充值系统上线了</h3>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="banner2">
                            <div class="caption">
                                <h3><span></span>快捷 </h3>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="banner3">
                            <div class="caption">
                                <h3><span></span> 方便</h3>

                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="banner4">
                            <div class="caption">
                                <h3><span> </span> 安全 </h3>

                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<!--Vertical Tab-->
<div class="categories-section main-grid-border" id="mobilew3layouts">
    <div class="container">
        <div class="category-list">
            <div id="parentVerticalTab">
                <div class="agileits-tab_nav">
                    <ul class="resp-tabs-list hor_1">
                        <li><i class="icon fa fa-tint" aria-hidden="true"></i>热水充值</li>
                        <li><i class="icon fa fa-lightbulb-o" aria-hidden="true"></i> 电费充值</li>
                        <li><i class="icon fa fa-credit-card" aria-hidden="true"></i>空调费充值</li>

                    </ul>
                </div>
                <div class="resp-tabs-container hor_1">
                    <!-- tab1 -->
                    <div>
                        <div class="tabs-box">
                            <div class="tab-grids">
                                <div id="tab1" class="tab-grid">
                                    <div class="login-form">
                                       <form  id="signup">
												<ol>
													<li><input type="text" id="tel" class="card1"
														placeholder="请输入卡的编号" required="required" />
														 
				 
														<p class="validation01">
														
															<span class="invalid">请输入卡的编号</span> <span class="valid">That's
																what we wanted!</span>
														</p></li>
													<li><input type="text" id="tel"  class="money1"
														placeholder="请输入充值金额" required="required" /></li>
													<li>
														<div class="mobile-right ">



															<div class="clearfix"></div>
														</div>
													</li>
													<li><input type="button" onclick="chongzhi()" class="submit" value="充值" />
													</li>
												</ol>
											</form>

                                    </div>
                                    <script type="text/javascript">
                                    	function chongzhi(){
                                    		var a = $(".card1").val();
                                    		var b = $(".money1").val();
                                    	 	$.ajax({
                                				type : "POST",
                                				url : "<%=basePath%>his/zhi",
                                				dataType : 'json',
                                				data : {
                                					"card" : a,
                                					"money" : b

                                				},
                                				success : function(result) {
                                					 if (result.status == 0) {
                                						alert("充值成功")
                                						 window.location.href="AboutCenten.jsp";
                                							
                                					}else if(result.status==3){
                                						alert("余额不足！")
                                					}else{ alert("你的输入有误！")}
                                			 	},
                                				error : function(result) {
                                					 alert("异常！");
                                				}

                                			});
                                    	}
                                    </script>

                                </div>
                                <div id="tab2" class="tab-grid">
                                    <div class="login-form">
                                        <form  id="signup">
                                            <ol>
                                                <li>

                                                    <input type="text" id="tel"   name="tel" placeholder="Enter Mobile Number" required />
                                                    <p class="validation01">

                                                    </p>
                                                </li>

                                                <li>
                                                    <div class="mobile-right ">

                                                        <div class="mobile-rchge">
                                                            <input type="text"   placeholder="Enter amount" name="amount" required="required"  />
                                                        </div>
                                                        <div class="clearfix"></div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <input type="submit" class="submit" value="Pay bill" />
                                                </li>
                                            </ol>
                                        </form>
 									

                                    </div>
                                </div>
                            </div>


                        </div>
                        <!-- script -->
                        <script>
                            $(document).ready(function() {
                                $("#tab2").hide();
                                $("#tab3").hide();
                                $("#tab4").hide();
                                $(".tabs-menu a").click(function(event){
                                    event.preventDefault();
                                    var tab=$(this).attr("href");
                                    $(".tab-grid").not(tab).css("display","none");
                                    $(tab).fadeIn("slow");
                                });
                            });
                        </script>





                    </div>
                    <!-- /tab1 -->
                    <!-- tab2 -->
                    <div>

                        <div class="login-form"></em>
                            <form   id="signup">

                                <ol>

                                    <li>
                                        <input type="text" id="customer"  placeholder="输入寝室号" required="">
                                    </li>
                                    <li>
                                        <div class="mobile-right ">
                                            <div class="mobile-rchge">
                                                <input type="text" class="money2" placeholder="输入充值金额" name="amount" required="required"  />
                                            </div>
                                            <div class="clearfix"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <input type="button"  onclick="chongzhi2()"  class="submit" value="充值" />
                                    </li>
                                </ol>
                            </form>
                            
                            <script type="text/javascript">
                                    	function chongzhi2(){
                                    		var a = $("#customer").val();
                                    		var b = $(".money2").val();
                                    		 
                                    	 	$.ajax({
                                				type : "POST",
                                				url : "<%=basePath%>his/zhi",
                                				dataType : 'json',
                                				data : {
                                					"card" : a,
                                					"money" : b

                                				},
                                				success : function(result) {
                                					 if (result.status == 0) {
                                						alert("充值成功")
                                						 window.location.href="AboutCenten.jsp";
                                							
                                					}else if(result.status==3){
                                						alert("余额不足！")
                                					}else{ alert("你的输入有误！")}
                                			 	},
                                				error : function(result) {
                                					 alert("异常！");
                                				}

                                			});
                                    	}
                                    </script>

                        </div>
                    </div>
                    <!-- /tab2 -->

                    <!-- tab3 -->
                    <div>
                        <div id="tab2" class="tab-grid">
                            <div class="login-form">
                                <form   id="signup">
                                    <ol>
                                        <li>
                                            <input type="text" id="tel" class="card3" name="tel"  placeholder="输入空调号" pattern="\d{10}" required />
                                            <p class="validation01">
                                                <span class="invalid">输入你的账号</span>

                                            </p>
                                        </li>

                                        <li>
                                            <div class="mobile-right ">

                                                <div class="mobile-rchge">
                                                    <input type="text" class="mone3" placeholder="输入充值金额" name="amount" required="required"  />
                                                </div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <input type="button"  onclick="chongzhi3()" class="submit" value="充值" />
                                        </li>
                                    </ol>
                                </form>
 							<script type="text/javascript">
                                    	function chongzhi3(){
                                    		var a = $(".card3").val();
                                    		var b = $(".mone3").val();
                                    	 	$.ajax({
                                				type : "POST",
                                				url : "<%=basePath%>his/zhi",
                                				dataType : 'json',
                                				data : {
                                					"card" : a,
                                					"money" : b

                                				},
                                				success : function(result) {
                                					 if (result.status == 0) {
                                						alert("充值成功")
                                						 window.location.href="AboutCenten.jsp";
                                							
                                					}else if(result.status==3){
                                						alert("余额不足！")
                                					}else{ alert("你的输入有误！")}
                                			 	},
                                				error : function(result) {
                                					 alert("异常！");
                                				}

                                			});
                                    	}
                                    </script>	
                            </div>

                        </div>
                    </div>
                                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div> 

<script type="text/javascript">
    $(document).ready(function() {

        //Vertical Tab
        $('#parentVerticalTab').easyResponsiveTabs({
            type: 'vertical', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            tabidentify: 'hor_1', // The tab groups identifier
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#nested-tabInfo2');
                var $name = $('span', $info);
                $name.text($tab.text());
                $info.show();
            }
        });
    });
</script>

<div class="phone" id="mobileappagileits">
    <div class="container">
        <div class="col-md-6">
            <img src="images/ph1.png" class="img-responsive" alt=""/>
        </div>
        <div class="col-md-6 phone-text">
            <h4>校园充手机端上线了！</h4>

            <div class="text-1">
                <h5>Recharge</h5>
                <p>更加简单快捷的付款方式</p>
            </div>
            <div class="text-1"> </div>
            <div class="agileinfo-dwld-app">
                <h6>Download The App :
                    <a href="#"><i class="fa fa-android"></i></a>
                </h6>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="wthree-mobile-app"> </div>
    </div>
</div>
<footer>
    <div class="container-fluid">
        <div class="w3-agile-footer-top-at"> </div>
    </div>
    <div class="w3l-footer-bottom">
        <div class="container-fluid">
            <div class="col-md-4 w3-footer-logo">
                <h2><a href="index.html">校园充值系统</a></h2>
            </div>
            <div class="col-md-8 agileits-footer-class">
                <p >©© 校园充值系统   <a href="about.html" target="_blank">宏誉工作室</a> </p>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</footer>

<script src="js/responsiveslides.min.js"></script>
<script>
    $(function () {
        $("#slider").responsiveSlides({
            auto: true,
            speed: 500,
            namespace: "callbacks",
            pager: true,
        });
    });
</script>

<script src="js/bootstrap-select.js"></script>
<script>
    $(document).ready(function () {
        var mySelect = $('#first-disabled2');

        $('#special').on('click', function () {
            mySelect.find('option:selected').prop('disabled', true);
            mySelect.selectpicker('refresh');
        });

        $('#special2').on('click', function () {
            mySelect.find('option:disabled').prop('disabled', false);
            mySelect.selectpicker('refresh');
        });

        $('#basic2').selectpicker({
            liveSearch: true,
            maxOptions: 1
        });
    });
</script>
<link rel="stylesheet" type="text/css" href="css/easy-responsive-tabs.css " />
<script src="js/easyResponsiveTabs.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $().UItoTop({ easingType: 'easeOutQuart' });

    });
</script>

<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

</body>

</html>
